<template>
  <div class="search-box">
    <a-modal v-model:visible="open" width="500px" title="审核不通过" :confirmLoading="loading" @cancel="hideModal" @ok="handleOk">
      <div style="padding-bottom: 10px">拒绝原因</div>
      <a-textarea v-model:value="reason" placeholder="请输入拒绝原因" allow-clear :rows="3" />
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import message from 'ant-design-vue/es/message'
  import { onMounted, reactive, ref } from 'vue'

  import { approveRequire } from '/@/api/exchange/requirement'

  const emit = defineEmits<(e: 'back') => void>()
  const props = defineProps({
    requireParticipateId: { type: String, default: '' },
  })
  const open = ref<boolean>(false)
  const reason = ref<string>()
  const loading = ref<boolean>(false)

  // 打开弹窗
  const showModal = () => {
    open.value = true
  }

  // 关闭弹窗
  const hideModal = () => {
    open.value = false
    reason.value = ''
    loading.value = false
  }

  // 提交
  const handleOk = async () => {
    if (!reason.value) {
      message.error('请输入拒绝原因')
      return
    }
    loading.value = true
    const params = {
      requireParticipateId: props.requireParticipateId,
      approveStatus: 3,
      approveMsg: reason.value,
    }
    const { responseCode, responseMessage } = await approveRequire(params)
    if (responseCode === 100000000) {
      message.success('操作成功')
      hideModal()
      emit('back')
    } else {
      message.warning(responseMessage || '操作失败')
    }
    loading.value = false
  }

  defineExpose({
    showModal,
  })
</script>
<style lang="less" scoped></style>
